<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id = "some" data:type="xxxx"></div>
<div></div>
<script>
const html1 = '<div class="classAttr">我是外层div\n' +
  '    <span >我是内层span</span>\n' +
  '</div><div>vvvvvv</div>'
const html2 = '<div class="classAttr" data-type="dataType" data-id="dataId" style="color:red">我是外层div\n' +
  '    <span style="color: #eee;">我是内层span</span>\n' +
  '</div>'
  const html3 = '<div>我是一个div</div>'

/**
 * 因为存在自定义标签，所以标签不仅 html 常用标签；
 *
 * 符合标签规范即可:  字母和下划线开头，包含字母、数字、下滑线、中划线、点号组成
 */
const ncname = /[a-zA-Z_][\w-.]*/

//            |           属性名称            |    双引号      |  单引号  |  无引号
const attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+))/

  console.log("class=abc".match(attr))
  console.log("class='abc \"abc\"' style='color=red;' data-name='test-abc'".match(attr))
  console.log("class=\"abc\" style=\"color=red;\" data-name=\"test-abc\"".match(attr))

const tag = /<[a-zA-Z_][\w\-\.]*(?:\s+([a-zA-Z_:][-a-zA-Z0-9_:.]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))*>[\s\S]*<\/[a-zA-Z_][\w\-\.][^>]*>/


const DOM = /<[a-zA-Z_][\w\-\.]*(?:\s+([a-zA-Z_:][-a-zA-Z0-9_:.]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))*>[\s\S]*<\/[a-zA-Z_][\w\-\.]*>/;
// 增加()分组输出
const startTag = /<([a-zA-Z_][\w\-\.]*)((?:\s+([a-zA-Z_:][-a-zA-Z0-9_:.]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))*)\s*(\/?)>/;

const endTag = /<\/([a-zA-Z_][\w\-\.]*)>/;

const attrs = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+))/g


console.log(html1.match(endTag))


const node = {
  node: 'element',
  tag: 'div',
  class: '',
  value: '',
  dataset: '',
  attrs: '',
}

</script>
</body>
</html>
